<template>
<div class="my">
  <van-sticky>
    <div class="van-sticky-top">
      <nav-bar title="帐户" isBg="0">
        <span class="icon-history" @click="$router.push({'path': '/stream'})"></span>
      </nav-bar>
      <div class="accountInfo">
        <div class="text">我的余额</div>
        <div class="amount">200.00 DC</div>
        <div class="info">
          <span>可用：0.00 DC</span>
          <span>冻结：0.00 DC</span>
        </div>
      </div>
    </div>
   </van-sticky>
    <div class="buttons">
      <span class="my-button" @click="$router.push({'path': '/order/paystate'})">买币</span>
      <span class="my-button">卖币</span>
    </div>
    <div class="order-list">
      <div class="name">订单</div>
      <van-list v-model="loading" :finished="finished" :offset="50" :immediate-check="false" finished-text="暂无数据" @load="onLoad">
          <running-water :list="streamList"></running-water>
      </van-list>
    </div>
</div>
</template>
<script>
export default {
  name: 'My',
  data() {
    return {
      streamList: [],
      isLoading: false,
      finished: false,
      loading: false
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
      }, 500);
    },
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
      }, 500);
    }
  }
};
</script>
<style lang="less" scoped>
.my{
 .van-sticky-top{
   background:linear-gradient(37deg,rgba(38,86,243,1) 0%,rgba(37,117,252,1) 100%);
 }
 .icon-history{
  background-image: url('../../assets/images/icon-history.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 44px 42px;
  display: inline-block;
  width: 44px;
  height: 42px;
  margin-right: 10px;
  margin-top:5px;
 }
 .accountInfo{
   padding: 45px 97px;
   .text{
     color: #D1DBFF;
     font-size:24px;
   }
   .amount{
     font-size: 36px;
     color: #fff;
     text-align: center;
     padding: 30px 0;
   }
   .info{
     display: flex;
     justify-content: space-between;
     color: #D1DBFF;
   }
 }
 .buttons{
   display: flex;
   justify-content: space-between;
   padding:30px 20px;
   .my-button{
     display: block;
     flex: 1;
     padding: 23px 0;
     color: #fff;
     text-align: center;
     margin:0 40px;
     font-size: 30px;
     background-color: #2575FC;
     border-radius: 80px;
   }
 }
 .order-list{
   .name{
     padding: 18px 28px;
     color: #666;
     font-size: 24px;
   }
 }
}
</style>
